<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素before</title>
</head>
<style>
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
</style>
<body>
    <div>
        <ul>
            <li>Buy milk</li>
            <li>Take the dog for a walk</li>
            <li>Exercise</li>
            <li>Write code</li>
            <li>Play music</li>
            <li>Relax</li>
        </ul>
    </div>
</body>
<script>
    var list = document.querySelector('ul');
    list.addEventListener('click', function(ev) {
    if( ev.target.tagName === 'LI') {
        ev.target.classList.toggle('done');
    }
    }, false);
</script>
</html>